<template>
  <Transition appear>
    <div :class="['drawer']" v-if="show">
      <div class="top">
        <div class="avatar">
          <img src="../assets/image/avatar.jpg" alt="" />
        </div>
        <div class="detail">
          <router-link class="wenzhang" :to="{ name: 'archive' }">
            <div class="title">文章</div>
            <div class="num">{{ info["article_num"] }}</div>
          </router-link>
          <router-link class="fenlei" :to="{ name: 'class' }">
            <div class="title">分类</div>
            <div class="num">{{ info["class_num"] }}</div>
          </router-link>
          <router-link class="biaoqian" :to="{ name: 'tab' }">
            <div class="title">标签</div>
            <div class="num">{{ info["tag_num"] }}</div>
          </router-link>
        </div>
      </div>
      <div class="bottom">
        <div v-for="(item, i) in List" :key="i" class="item" @click="go(item.link)">
          <i :class="['iconfont', item.icon]"></i>
          {{ item.name }}
        </div>
      </div>
    </div>
  </Transition>
</template>

<script>

import { hideMask } from "@/components/mask/mask";
import { mapState } from "vuex";

export default {
  data() {
    return {
      List: [
        {
          link: "home",
          name: "首页",
          icon: "icon-home"
        },
        {
          link: "class",
          name: "分类",
          icon: "icon-yingyong"
        },
        {
          link: "tab",
          name: "标签",
          icon: "icon-biaoqian"
        },
        {
          link: "archive",
          name: "归档",
          icon: "icon-wendang"
        },
        {
          link: "photo",
          name: "相册",
          icon: "icon-xiangce"
        },
        {
          link: "message",
          name: "留言",
          icon: "icon-liuyan"
        }
      ],
      a: 0,
      t: 0,
      c: 0,
      show: false
    };
  },
  methods: {
    go(name) {
      this.show = false;
      this.$router.push({ name: name });
    },
    OutsideClick() {
      document.addEventListener("click", (e) => {
        let drawer = document.querySelector(".drawer");
        let icon = document.querySelector(".icon-caidan");
        if (drawer) {
          if (!drawer.contains(e.target) && e.target !== drawer && e.target !== icon) {
            this.show = false;
          }
        }

      });
    }
  },
  async mounted() {
    this.$bus.$on("showDrawer", () => {
      this.show = true;
      this.OutsideClick();
    });
  },
  watch: {
    show(val) {
      console.log(val);
      if (!val) {
        hideMask();
      }
    }
  },
  computed:
    mapState({
      info: state => state.info
    })

};
</script>
<style lang="scss" scoped>
.drawer {
  z-index: 99;

  a {
    color: var(--font-color);
  }

  min-height: 100vh;
  background-color: #f6f8fa;
  width: 242px;
  position: fixed;
  top: 0;
  right: 0;
  //transition: transform 0.5s;
  .top {
    width: 100%;
    border-bottom: 5px dashed var(--color-primary);

    .avatar {
      width: 100%;
      height: 180px;
      padding: 30px 66px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        transition: all 1s;

        &:hover {
          transform: rotateZ(360deg);
        }
      }
    }

    .detail {
      display: flex;
      width: 100%;
      // padding: 10px;
      a {
        flex: 1;
        display: block;
        text-align: center;

        .num {
          margin: 10px 0 20px;
        }
      }
    }
  }

  .bottom {
    padding: 20px 0;

    .item {
      padding: 10px 35px;

      &:hover {
        background: #f1f1f1;
        cursor: pointer;
      }
    }

    a {
      margin: 10px 0;
      display: block;
      width: 100%;
      height: 40px;
      font-size: 16px;
      line-height: 40px;

      i {
        margin-right: 30px;
      }
    }
  }
}

.v-enter-active,
.v-leave-active {
  transition: right .5s;
}

.v-enter,
.v-leave-to {
  right: -242px;
}
</style>